<template>
  <!-- 顶部欢迎区域 -->
  <div class="welcome-section">
    <div class="welcome-card">
      <div class="user-info">
        <img src="@/assets/images/avoter.png" class="avatar" />
        <div class="user-details">
          <h2 class="greeting">早安，{{ userName }}，开始您一天的工作吧！</h2>
          <p class="date">{{ currentDate }}</p>
        </div>
      </div>
      <div class="quick-stats">
        <div class="stat-item">
          <div class="stat-icon todo">
            <el-icon><Document /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-number">{{ todoCount }}/{{ totalTodo }}</div>
            <div class="stat-label">待办事项</div>
          </div>
        </div>
        <div class="stat-item">
          <div class="stat-icon project">
            <el-icon><Folder /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-number">{{ projectCount }}</div>
            <div class="stat-label">进行中项目</div>
          </div>
        </div>
        <div class="stat-item">
          <div class="stat-icon team">
            <el-icon><User /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-number">{{ teamCount }}</div>
            <div class="stat-label">团队成员</div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 主要内容区域 -->
  <div class="main-content">
    <el-row :gutter="20">
      <!-- 左侧内容 -->
      <el-col :span="16">
        <el-space direction="vertical" alignment="normal" class="left-content">
          <!-- 项目概览 -->
          <el-card class="project-overview" shadow="hover">
            <template #header>
              <div class="card-header">
                <span class="card-title">项目概览</span>
                <el-button type="primary" size="small" text>查看更多</el-button>
              </div>
            </template>
            <div class="project-grid">
              <div
                v-for="project in projects"
                :key="project.id"
                class="project-item"
                :class="project.status"
              >
                <div class="project-icon">
                  <el-icon><component :is="project.icon" /></el-icon>
                </div>
                <div class="project-info">
                  <h4>{{ project.name }}</h4>
                  <p>{{ project.description }}</p>
                  <div class="project-progress">
                    <el-progress
                      :percentage="project.progress"
                      :color="getProgressColor(project.progress)"
                      :stroke-width="6"
                    />
                    <span class="progress-text">{{ project.progress }}%</span>
                  </div>
                </div>
                <div class="project-status">
                  <el-tag :type="getStatusType(project.status)" size="small">
                    {{ getStatusText(project.status) }}
                  </el-tag>
                </div>
              </div>
            </div>
          </el-card>

          <!-- 最新动态 -->
          <el-card class="activity-feed" shadow="hover">
            <template #header>
              <div class="card-header">
                <span class="card-title">最新动态</span>
                <el-button type="primary" size="small" text>查看更多</el-button>
              </div>
            </template>
            <div class="activity-list">
              <div v-for="activity in activities" :key="activity.id" class="activity-item">
                <div class="activity-avatar">
                  <el-avatar :size="32" :src="activity.avatar">
                    {{ activity.user.charAt(0) }}
                  </el-avatar>
                </div>
                <div class="activity-content">
                  <div class="activity-text">
                    <strong>{{ activity.user }}</strong>
                    {{ activity.action }}
                  </div>
                  <div class="activity-time">{{ activity.time }}</div>
                </div>
              </div>
            </div>
          </el-card>
        </el-space>
      </el-col>

      <!-- 右侧内容 -->
      <el-col :span="8">
        <el-space direction="vertical" alignment="normal" class="right-content">
          <!-- 快捷导航 -->
          <el-card class="quick-nav" shadow="hover">
            <template #header>
              <div class="card-header">
                <span class="card-title">快捷导航</span>
              </div>
            </template>
            <div class="nav-grid">
              <div
                v-for="nav in quickNavs"
                :key="nav.name"
                class="nav-item"
                @click="handleNavClick(nav.path)"
              >
                <div class="nav-icon">
                  <el-icon><component :is="nav.icon" /></el-icon>
                </div>
                <span class="nav-name">{{ nav.name }}</span>
              </div>
            </div>
          </el-card>

          <!-- 工作统计图表 -->
          <el-card class="work-stats" shadow="hover">
            <template #header>
              <div class="card-header">
                <span class="card-title">本周工作统计</span>
              </div>
            </template>
            <div class="chart-container">
              <div ref="workChartRef" class="work-chart"></div>
            </div>
          </el-card>

          <!-- 团队效率 -->
          <el-card class="team-efficiency" shadow="hover">
            <template #header>
              <div class="card-header">
                <span class="card-title">团队效率</span>
              </div>
            </template>
            <div class="efficiency-list">
              <div v-for="team in teamEfficiency" :key="team.name" class="efficiency-item">
                <div class="team-info">
                  <span class="team-name">{{ team.name }}</span>
                  <span class="efficiency-rate">{{ team.efficiency }}%</span>
                </div>
                <el-progress
                  :percentage="team.efficiency"
                  :color="getEfficiencyColor(team.efficiency)"
                  :stroke-width="8"
                />
              </div>
            </div>
          </el-card>
        </el-space>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import * as echarts from 'echarts'
import {
  Document,
  Folder,
  User,
} from '@element-plus/icons-vue'

const router = useRouter()

// 响应式数据
const userName = ref('管理员')
const currentDate = ref('')
const todoCount = ref(2)
const totalTodo = ref(10)
const projectCount = ref(8)
const teamCount = ref(300)
const workChartRef = ref<HTMLElement>()

// 项目数据
const projects = ref([
  {
    id: 1,
    name: 'RBAC管理系统',
    description: '基于角色的访问控制系统',
    progress: 85,
    status: 'active',
    icon: 'Monitor',
  },
  {
    id: 2,
    name: '前端组件库',
    description: 'Vue3 + Element Plus组件库',
    progress: 92,
    status: 'active',
    icon: 'Collection',
  },
  {
    id: 3,
    name: '数据可视化',
    description: 'ECharts图表组件开发',
    progress: 65,
    status: 'active',
    icon: 'DataBoard',
  },
  {
    id: 4,
    name: '移动端适配',
    description: '响应式布局优化',
    progress: 45,
    status: 'pending',
    icon: 'Monitor',
  },
  {
    id: 5,
    name: '性能优化',
    description: '系统性能提升方案',
    progress: 30,
    status: 'pending',
    icon: 'TrendCharts',
  },
  {
    id: 6,
    name: '文档完善',
    description: 'API文档和用户手册',
    progress: 75,
    status: 'active',
    icon: 'Document',
  },
])

// 最新动态数据
const activities = ref([
  {
    id: 1,
    user: '张三',
    action: '完成了RBAC权限模块的开发',
    time: '2小时前',
    avatar: '',
  },
  {
    id: 2,
    user: '李四',
    action: '提交了前端组件库的更新',
    time: '4小时前',
    avatar: '',
  },
  {
    id: 3,
    user: '王五',
    action: '创建了新的项目任务',
    time: '6小时前',
    avatar: '',
  },
  {
    id: 4,
    user: '赵六',
    action: '完成了数据可视化图表',
    time: '8小时前',
    avatar: '',
  },
  {
    id: 5,
    user: '钱七',
    action: '修复了系统bug',
    time: '1天前',
    avatar: '',
  },
])

// 快捷导航
const quickNavs = ref([
  { name: '首页', icon: 'House', path: '/dashboard/home' },
  { name: '仪表盘', icon: 'TrendCharts', path: '/dashboard/workbench' },
  { name: '系统管理', icon: 'Setting', path: '/company/user' },
  { name: '权限管理', icon: 'Lock', path: '/company/role' },
  { name: '消息中心', icon: 'Message', path: '/message/myMessage' },
  { name: '通知设置', icon: 'Bell', path: '/system/setting' },
])

// 团队效率数据
const teamEfficiency = ref([
  { name: '前端团队', efficiency: 92 },
  { name: '后端团队', efficiency: 88 },
  { name: '设计团队', efficiency: 85 },
  { name: '测试团队', efficiency: 90 },
])

// 方法
const getCurrentDate = () => {
  const now = new Date()
  const options: Intl.DateTimeFormatOptions = {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    weekday: 'long',
  }
  currentDate.value = now.toLocaleDateString('zh-CN', options)
}

const getProgressColor = (progress: number) => {
  if (progress >= 80) return '#67c23a'
  if (progress >= 50) return '#e6a23c'
  return '#f56c6c'
}

const getStatusType = (status: string) => {
  switch (status) {
    case 'active':
      return 'primary'
    case 'pending':
      return 'warning'
    case 'completed':
      return 'success'
    default:
      return 'info'
  }
}

const getStatusText = (status: string) => {
  switch (status) {
    case 'active':
      return '进行中'
    case 'pending':
      return '待开始'
    case 'completed':
      return '已完成'
    default:
      return '未知'
  }
}

const getEfficiencyColor = (efficiency: number) => {
  if (efficiency >= 90) return '#67c23a'
  if (efficiency >= 70) return '#e6a23c'
  return '#f56c6c'
}

const handleNavClick = (path: string) => {
  router.push(path)
}

// 初始化工作统计图表
const initWorkChart = () => {
  if (!workChartRef.value) return

  const chart = echarts.init(workChartRef.value)
  const option = {
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)',
    },
    legend: {
      orient: 'vertical',
      left: 'left',
      textStyle: {
        fontSize: 12,
      },
    },
    series: [
      {
        name: '工作分布',
        type: 'pie',
        radius: ['40%', '70%'],
        center: ['60%', '50%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2,
        },
        label: {
          show: false,
          position: 'center',
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '18',
            fontWeight: 'bold',
          },
        },
        labelLine: {
          show: false,
        },
        data: [
          { value: 35, name: '开发任务', itemStyle: { color: '#409eff' } },
          { value: 25, name: '会议讨论', itemStyle: { color: '#67c23a' } },
          { value: 20, name: '文档编写', itemStyle: { color: '#e6a23c' } },
          { value: 15, name: '测试调试', itemStyle: { color: '#f56c6c' } },
          { value: 5, name: '其他', itemStyle: { color: '#909399' } },
        ],
      },
    ],
  }

  chart.setOption(option)

  // 响应式处理
  window.addEventListener('resize', () => {
    chart.resize()
  })
}

// 生命周期
onMounted(() => {
  getCurrentDate()
  nextTick(() => {
    initWorkChart()
  })
})
</script>

<style scoped lang="less">
.welcome-section {
  margin-bottom: 24px;

  .welcome-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 16px;
    padding: 32px;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3);

    .user-info {
      display: flex;
      align-items: center;
      gap: 20px;

      .avatar {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        border: 4px solid rgba(255, 255, 255, 0.3);
        object-fit: cover;
      }

      .user-details {
        .greeting {
          font-size: 24px;
          font-weight: 600;
          margin: 0 0 8px 0;
        }

        .date {
          font-size: 14px;
          opacity: 0.8;
          margin: 0;
        }
      }
    }

    .quick-stats {
      display: flex;
      gap: 32px;

      .stat-item {
        display: flex;
        align-items: center;
        gap: 12px;

        .stat-icon {
          width: 48px;
          height: 48px;
          border-radius: 12px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 20px;

          &.todo {
            background: rgba(255, 255, 255, 0.2);
          }

          &.project {
            background: rgba(255, 255, 255, 0.2);
          }

          &.team {
            background: rgba(255, 255, 255, 0.2);
          }
        }

        .stat-content {
          .stat-number {
            font-size: 20px;
            font-weight: 600;
            line-height: 1;
          }

          .stat-label {
            font-size: 12px;
            opacity: 0.8;
            margin-top: 4px;
          }
        }
      }
    }
  }
}

.main-content {
  .left-content,
  .right-content {
    width: 100%;
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .card-title {
      font-size: 16px;
      font-weight: 600;
      color: #303133;
    }
  }

  .project-overview {
    .project-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 16px;

      .project-item {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 16px;
        border-radius: 12px;
        border: 1px solid #ebeef5;
        transition: all 0.3s ease;

        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        }

        &.active {
          border-color: #409eff;
          background: rgba(64, 158, 255, 0.05);
        }

        &.pending {
          border-color: #e6a23c;
          background: rgba(230, 162, 60, 0.05);
        }

        .project-icon {
          width: 48px;
          height: 48px;
          border-radius: 12px;
          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          display: flex;
          align-items: center;
          justify-content: center;
          color: white;
          font-size: 20px;
        }

        .project-info {
          flex: 1;

          h4 {
            margin: 0 0 4px 0;
            font-size: 14px;
            font-weight: 600;
            color: #303133;
          }

          p {
            margin: 0 0 8px 0;
            font-size: 12px;
            color: #909399;
          }

          .project-progress {
            display: flex;
            align-items: center;
            gap: 8px;

            .progress-text {
              font-size: 12px;
              color: #909399;
              min-width: 30px;
            }
          }
        }

        .project-status {
          flex-shrink: 0;
        }
      }
    }
  }

  .activity-feed {
    .activity-list {
      .activity-item {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 12px 0;
        border-bottom: 1px solid #f0f0f0;

        &:last-child {
          border-bottom: none;
        }

        .activity-content {
          flex: 1;

          .activity-text {
            font-size: 14px;
            color: #303133;
            margin-bottom: 4px;

            strong {
              color: #409eff;
            }
          }

          .activity-time {
            font-size: 12px;
            color: #909399;
          }
        }
      }
    }
  }

  .quick-nav {
    .nav-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;

      .nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        padding: 16px 8px;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.3s ease;

        &:hover {
          background: #f5f7fa;
          transform: translateY(-2px);
        }

        .nav-icon {
          width: 40px;
          height: 40px;
          border-radius: 8px;
          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          display: flex;
          align-items: center;
          justify-content: center;
          color: white;
          font-size: 18px;
        }

        .nav-name {
          font-size: 12px;
          color: #606266;
          text-align: center;
        }
      }
    }
  }

  .work-stats {
    .chart-container {
      height: 300px;

      .work-chart {
        width: 100%;
        height: 100%;
      }
    }
  }

  .team-efficiency {
    .efficiency-list {
      .efficiency-item {
        margin-bottom: 16px;

        &:last-child {
          margin-bottom: 0;
        }

        .team-info {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 8px;

          .team-name {
            font-size: 14px;
            color: #303133;
          }

          .efficiency-rate {
            font-size: 14px;
            font-weight: 600;
            color: #409eff;
          }
        }
      }
    }
  }
}

// 响应式设计
@media (max-width: 1200px) {
  .welcome-card {
    flex-direction: column;
    gap: 24px;
    text-align: center;

    .quick-stats {
      justify-content: center;
    }
  }

  .project-grid {
    grid-template-columns: 1fr !important;
  }

  .nav-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 768px) {
  .workbench-container {
    padding: 16px;
  }

  .welcome-card {
    padding: 24px;

    .user-info {
      flex-direction: column;
      gap: 16px;
    }

    .quick-stats {
      flex-direction: column;
      gap: 16px;
    }
  }

  .nav-grid {
    grid-template-columns: 1fr !important;
  }
}
</style>
